<template>
    <rx-dialog @handOk="onOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="form" layout="vertical" class="rx-a-form-vertical">
                    <a-form-model-item :label="i18n('list.type','类型')"  >
                      <a-radio-group buttonStyle="solid" v-model="form.type" @change="changeType">
                        <a-radio-button value="select">{{i18n('list.select','显示下拉框')}}</a-radio-button>
                        <a-radio-button value="fill">{{i18n('list.fill','数据填充')}}</a-radio-button>
                      </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('list.valueSource','值来源')"  >
                        <a-radio-group v-if="form.type=='select'" buttonStyle="solid" v-model="form.from">
                            <a-radio-button value="custom">{{i18n('list.custom','自定义')}}</a-radio-button>
                            <a-radio-button value="dic">{{i18n('list.dict','数据字典')}}</a-radio-button>
                            <a-radio-button value="sql">{{i18n('list.customSQL','自定义SQL')}}</a-radio-button>
                            <a-radio-button value="interface">{{i18n('list.interfaceName','第三方接口')}}</a-radio-button>
                        </a-radio-group>
                        <a-radio-group v-else-if="form.type=='fill'" buttonStyle="solid" v-model="form.from">
                          <a-radio-button value="fixed">{{i18n('list.fixed','固定值')}}</a-radio-button>
                          <a-radio-button value="script">{{i18n('list.script','脚本')}}</a-radio-button>
                          <a-radio-button value="constant">{{i18n('list.constant','常量')}}</a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                  <tempalte v-if="form.type=='select'">
                    <a-form-model-item v-if="form.from=='custom'" :label="i18n('list.option','选项')" >
                      <div class="table-operator">
                        <a-button @click="addRow">{{$ti18('rxList.add','新增')}}</a-button>
                        <a-button @click="removeRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
                        <a-button @click="upRow">{{i18n('list.up','向上')}}</a-button>
                        <a-button @click="downRow">{{i18n('list.down','向下')}}</a-button>
                      </div>
                      <rx-grid ref="props"
                               :bordered="true"
                               :allowRowSelect="true"
                               :multiSelect="true"
                               style="min-height:300px;"
                               :dataSource="options"
                               :columns="columns"
                               :showPage="false">
                              <span slot="name" slot-scope="{text,record,index,blur}">
                                <a-input v-model="record.name" />
                              </span>
                        <span slot="key" slot-scope="{text,record,index,blur}">
                                <a-input v-model="record.key" />
                              </span>
                      </rx-grid>
                    </a-form-model-item>
                    <a-form-model-item v-if="form.from=='dic'" :label="i18n('list.dict','数据字典')" >
                      <rx-input-button v-model="dicKeyTitle" @click="selectDic"></rx-input-button>
                    </a-form-model-item>
                    <a-form-model-item v-if="form.from=='sql'" :label="i18n('list.customSQL','自定义SQL')" >
                      <rx-input-button ref="sql" @click="openCustomQuery" v-model="form.sql" />
                    </a-form-model-item>
                    <a-form-model-item v-if="form.from=='sql'" :label="i18n('form.textField','文本字段')" >
                      <a-select :options="sqlFields" v-model="form.sqlTextField"/>
                    </a-form-model-item>
                    <a-form-model-item v-if="form.from=='sql'" :label="i18n('form.valueField','值字段')" >
                      <a-select :options="sqlFields" v-model="form.sqlValueField"/>
                    </a-form-model-item>
                    <a-form-model-item v-if="form.from=='interface'" :label="i18n('list.interfaceName','第三方接口')" >
                      <rx-input-button ref="interface" @click="openInterfaceApi" v-model="form.interface" />
                    </a-form-model-item>
                    <a-form-model-item v-if="form.from=='interface'" :label="i18n('form.textField','文本字段')" >
                      <a-select :options="interfaceFields" v-model="form.interfaceTextField"/>
                    </a-form-model-item>
                    <a-form-model-item v-if="form.from=='interface'" :label="i18n('form.valueField','值字段')" >
                      <a-select :options="interfaceFields" v-model="form.interfaceValueField"/>
                    </a-form-model-item>
                  </tempalte>
                  <template v-else-if="form.type=='fill'">
                    <a-form-model-item v-if="form.from=='fixed'" :label="i18n('list.fixed','固定值')" >
                      <a-input v-model="form.defaultValue" />
                    </a-form-model-item>
                    <a-form-model-item v-if="form.from=='script'" :label="i18n('list.script','脚本')" >
                      <rx-monaco-editor ref="javaCode"
                                        v-model="form.scriptValue"
                                        :key="form.from"
                                        style="margin-top: 10px;height:250px;"
                                        language="java">
                        <template v-slot:monacoeditor>
                          <div style="display: flex;align-items: center">
                            <span>
                              <a-button icon="edit" @click="showScriptDialog()">
                                {{ i18n('list.quickScript', '快速脚本') }}
                              </a-button>
                            </span>
                          </div>
                        </template>
                      </rx-monaco-editor>
                    </a-form-model-item>
                    <a-form-model-item v-if="form.from=='constant'" :label="i18n('list.constant','常量')" >
                      <a-select v-model="form.constantValue" :options="constantField" />
                    </a-form-model-item>
                  </template>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
    import {Dialog, Util,App,RxMonacoEditor} from "@lowcode/jpaas-common-lib";
    import AppName from "@/assets/js/AppName.js";
    import FormCustomQueryApi from "@/api/form/core/formCustomQuery";

    export default {
        name: "SelectConfig",
        props:{
            config:{
                type: Object,
                default: ()=>{
                    return {}
                }
            },
            layerid: {
                type: String,
                default: ""
            },
            destroy: {
                type: Function
            }
        },
        mixins:[App,AppName],
        components:{
          RxMonacoEditor
        },
        data() {
            return {
                labelCol: { span:6 },
                wrapperCol: { span:18 },
                dicKeyTitle:"",
                seqKeyTitle:"",
                form:{
                    //类型
                    type:"select",
                    //值来源
                    from:"custom",
                    //默认值
                    defaultValue:"",
                    //常量值
                    constantValue:"",
                    //脚本值
                    scriptValue:"",
                    //数据字典key
                    dicKey:"",
                    //数据字典名
                    dicName:"",
                    //自定义SQL
                    sqlKey:"",
                    //文本字段
                    sqlTextField:"",
                    //值字段
                    sqlValueField:"",
                    //第三方接口
                    interfaceKey:"",
                    //文本字段
                    interfaceTextField:"",
                    //值字段
                    interfaceValueField:"",
                    //是否为对象
                    isObject:false
                },
                //选项
                options:[],
                columns:[
                    {title: this.$ti18('rxList.index','序号'), type: 'indexColumn', width: 80, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                    {title: this.$ti18('rxForm.name','名称'), dataIndex: 'name', width: 120,scopedSlots: {customRender: 'name'}},
                    {title: this.$ti18('rxForm.key','编码'), dataIndex: 'key', width: 120,scopedSlots: {customRender: 'key'}}
                ],
                constantField:[],
                sqlFields:[],
                interfaceFields:[],
            }
        },
        created() {
            if(this.config && this.config.from){
                this.form=this.config;
                if(this.form.dicKey){
                  this.dicKeyTitle = {
                    text:this.form.dicName,
                    value:this.form.dicKey
                  }
                }
                if(this.form.seqKey){
                  this.seqKeyTitle = {
                    text:this.form.seqName,
                    value:this.form.seqKey
                  }
                }
                if(this.form.from=='custom') {
                    this.options = this.form.options;
                }
            }
            this.loadConstants();
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"SelectConfig",key);
            },
            loadConstants() {
              FormCustomQueryApi.getConstants().then(data => {
                this.constantField = this.constantField.concat(data.map(item => {
                  return {label: item.val, value: item.key}
                }));
              })
            },
            changeType(e){
              let value = e.target.value;
              if (value == "select") {
                this.form.from = "custom";
              } else {
                this.form.from = "fixed";
              }
            },
            showScriptDialog() {
              let self = this;
              let config = {curVm: this};
              Dialog.openScriptDialog(config, function (script) {
                self.$refs.javaCode.insertContent(script);
              })
            },
            selectDic(vm){
              var conf = {
                curVm: this, data: {allowTree:true}, widthHeight: ['800px', '600px'],
              }
              let self_ = this;
              Dialog.openSysDicDialog(conf,function (curVue, row) {
                self_.form.dicKey = row.alias
                self_.form.dicName = self_.$i18(row.name,"名称")
                vm.setVal(self_.form.dicKey,self_.form.dicName);
              })
            },
            openInterfaceApi(vm){
                Dialog.openSysInterfaceDialog({
                    curVm: this,max:true,data:{appName: this.serviceName}
                }, function (self, data) {
                    if(self.loadInterfaceFields(data)) {
                        self.form.interfaceKey = data.apiKey;
                        vm.setVal(data.apiKey, data.apiName);
                    }
                })
            },
            loadInterfaceFields(row){
                //接口返回值配置
                var fieldStr = row.apiReturnFields;
                if (!fieldStr || fieldStr=='[]') {
                    this.$message.warning(this.i18n('msa.apiSelTips1','请选择有返回值的接口！'));
                    return false;
                }
                var fields = JSON.parse(fieldStr);
                if(fields[0].paramType!='array'){
                    this.$message.warning(this.i18n('msa.apiSelTips2','请选择返回数据为数组的数据！'));
                    return false;
                }
                if(fields[0].children[0].paramType=='object' && fields[0].children[0].children) {
                    var ary=[];
                    for(var i=0;i<fields[0].children[0].children.length;i++) {
                        var item=fields[0].children[0].children[i];
                        ary.push({
                            value: item.paramName,
                            label: item.paramDesc || item.paramName
                        });
                    }
                    this.interfaceFields = ary;
                    this.form.isObject=true;
                }else{
                    this.interfaceFields = [{
                        label:fields[0].children[0].paramDesc || fields[0].children[0].paramName,
                        value:fields[0].children[0].paramName
                    }]
                    this.form.isObject=false;
                }
                return true;
            },
            openCustomQuery(vm){
                Dialog.openCustomDataDialog({
                    curVm: this, widthHeight: ['1200px', '600px']
                }, function (self, data) {
                    self.loadFields(data);
                    self.form.sqlKey=data.key;
                    vm.setVal(data.key,data.name);
                })
            },
            loadFields(row){
                var fieldStr=row.resultField;
                var whereStr=row.whereField;
                if(whereStr){
                    let self=this;
                    self.paramsData=[];
                    var fields = JSON.parse(whereStr);
                    fields.map(function(item){
                        if(item.valueSource=='param') {
                            self.paramsData.push(Object.assign(item,{bindVal:""}));
                        }
                    })
                }
                if(fieldStr) {
                    var fileds = JSON.parse(fieldStr);
                    var ary = fileds.map(function (item) {
                        return {
                            value: item.fieldName,
                            label: item.comment
                        }
                    })
                    this.sqlFields = ary;
                }
            },
            addRow(){
                this.$refs.props.addRow();
            },
            removeRow(){
                this.$refs.props.removeRows();
            },
            upRow(){
                this.$refs.props.moveUp();
            },
            downRow(){
                this.$refs.props.moveDown();
            },
            cancel(){
                Util.closeWindow(this,"cancel");
            },
            onOk(){
                if(this.form.from=='custom' && this.$refs.props) {
                    this.form.options = this.$refs.props.getData();
                }
                Util.closeWindow(this,"ok",this.form);
            },
        }
    }
</script>

<style scoped>

</style>